<template>
  <div class="content">

    <bx-content title="自定义标题">
      <bxFilter ref="filter" label-width="100px" :config="config">
        <!-- <div slot="name" class="name">
          查询
        </div> -->
        <div slot="custom">2222</div>
        <div slot="btn" class="btn">
          <el-button type="primary" @click="link">查询</el-button>
          <el-button type="primary" @click="setValue">重置</el-button>
        </div>
      </bxFilter>
    </bx-content>

    <div class="table">
      <bx-table ref="xTable" border highlight-hover-row row-id="id" :data="tableData" :config="{align:'center', 'edit-config':{trigger: 'manual', mode: 'row'}}">
        <vxe-table-column type="checkbox" min-width="60" fixed="left" />
        <vxe-table-column field="id" min-width="100" title="服务主体" :edit-render="{name: 'input', attrs: {type: 'text'}}" />
        <vxe-table-column field="card" min-width="100" title="订货卡号" :edit-render="{name: 'input', attrs: {type: 'text'}}" />
        <vxe-table-column field="age" min-width="100" title="品种" :edit-render="{name: '$select', options: sexList}" />
        <vxe-table-column field="a" min-width="100" title="总重量" :edit-render="{name: 'input', attrs: {type: 'text'}}" show-overflow />
        <vxe-table-column field="b" min-width="100" title="交货期" :edit-render="{name: 'input', attrs: {type: 'text'}}" show-overflow />
        <vxe-table-column field="c" min-width="100" title="创建日期" :edit-render="{name: '$input', props: {type: 'date'}}" show-overflow />
        <vxe-table-column field="d" min-width="100" title="付款类型" :edit-render="{name: 'input', attrs: {type: 'text'}}" show-overflow />
        <vxe-table-column field="e" min-width="120" title="订货卡状态" :edit-render="{name: 'input', attrs: {type: 'text'}}" show-overflow />
        <vxe-table-column field="f" min-width="100" title="交货方式" :edit-render="{name: 'input', attrs: {type: 'text'}}" show-overflow />
        <vxe-table-column field="g" min-width="100" title="最终用户" :edit-render="{name: 'input', attrs: {type: 'text'}}" show-overflow />
        <vxe-table-column field="h" min-width="100" title="开票方式" :edit-render="{name: 'input', attrs: {type: 'text'}}" show-overflow />
        <vxe-table-column field="i" min-width="100" title="订货用户" :edit-render="{name: 'input', attrs: {type: 'text'}}" show-overflow />
        <vxe-table-column field="j" min-width="100" title="填写人" :edit-render="{name: 'input', attrs: {type: 'text'}}" show-overflow />
        <vxe-table-column field="k" min-width="180" title="操作" fixed="right" show-overflow>
          <template v-slot="{ row }">
            <div class="flex-row space-center justify-center">
              <el-tooltip class="item" effect="dark" content="查看详情" placement="top">
                <div class="an-round-button green mar-right-10">
                  <i class="iconfont iconziyuan" />
                </div>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                <div class="an-round-button red mar-right-10" @click="editRowEvent(row)">
                  <i class="iconfont iconxiugai" />
                </div>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="撤销" placement="top">
                <div class="an-round-button blue mar-right-10">
                  <i class="iconfont iconzheng1" />
                </div>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="查看详情" placement="top">
                <div class="an-round-button blue mar-right-10">
                  <i class="iconfont iconzhu" />
                </div>
              </el-tooltip>
            </div>

          </template>
        </vxe-table-column>
        <template v-slot:empty>
          <span style="color: red;">
            <p>不用再看了，没有更多数据了！</p>
          </span>
        </template>
      </bx-table>
      <div class="flex-row space-between mar-top-10">
        <div />
        <el-pagination
          :page-sizes="[10, 20, 30, 50,100]"
          :page-size="10"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="9"
        />
      </div>
    </div>

    <div class="an-bottom-container">
      <div class="custom flex-row ">订货量: <span>43,453.53万</span> 吨</div>
      <div class="flex-row">
        <el-button type="primary" size="medium" @click="edit"><i class="iconfont iconbianji1" />手动填写</el-button>
        <el-button type="primary" size="medium" @click="car"><i class="iconfont icongouwucheman" />购物车</el-button>
        <el-button type="primary" size="medium" @click="excelImport"><i class="iconfont icondaoruwenjianjia" />Excel导入</el-button>
        <el-button type="primary" size="medium" @click="excelDownLoad"><i class="iconfont iconxiazai2" />Excel模板下载</el-button>
        <el-button type="primary" size="medium" @click="removeCard"><i class="iconfont icontubiao10" />删除订货卡</el-button>
        <el-button type="primary" size="medium" @click="downLoadCard"><i class="iconfont iconxiazai2" />下载订货卡</el-button>
        <el-button type="primary" size="medium" @click="submitCard"><i class="iconfont icontijiao2" />提交订货卡</el-button>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      config: [ // filter配置
        {
          type: 'input',
          key: 'q',
          slot: 'name',
          props: {
            label: '账单号',
            required: true,
            validator: {
              text: '不能为空',
              reg: 'required'
            }
          }
        },
        {
          type: 'input',
          key: 'a',
          slot: 'name',
          props: {
            label: '总重量',
            required: true,
            validator: {
              text: '不能为空',
              reg: 'required'
            },
            disabled: true
          }
        },
        {
          type: 'input',
          key: 'e',
          slot: 'name',
          props: {
            label: '订单号',
            required: true,
            validator: {
              text: '不能为空',
              reg: 'required'
            },
            disabled: true
          }
        },
        {
          type: 'input',
          key: 'r',
          slot: 'name',
          props: {
            label: '订货卡号',
            required: true,
            validator: {
              text: '不能为空',
              reg: 'required'
            }
          }
        },
        {
          type: 'select',
          key: 't',
          props: {
            label: '订货品种',
            required: true,
            validator: {
              text: '不能为空',
              reg: 'required'
            },
            disabled: true
          }
        },
        {
          type: 'select',
          key: 'y',
          props: {
            label: '交货方式',
            required: true,
            validator: {
              text: '不能为空',
              reg: 'required'
            }
          }
        },
        {
          type: 'select',
          key: 'u',
          span: 12,
          props: {
            label: '渠道公司',
            required: true,
            validator: {
              text: '不能为空',
              reg: 'required'
            },
            multiple: true
          }
        },
        {
          type: 'select',
          key: 'i',
          props: {
            label: '库存类型',
            required: true,
            validator: {
              text: '不能为空',
              reg: 'required'
            }
          }
        },
        {
          type: 'date',
          key: 'o',
          props: {
            label: '交货期',
            required: true,
            validator: {
              text: '不能为空',
              reg: 'required'
            },
            dateType: 'daterange'
          }
        },
        {
          type: 'date',
          key: 'p',
          props: {
            label: '日区间',
            dateType: 'daterange',
            required: true,
            validator: {
              text: '不能为空',
              reg: 'required'
            }
          }
        },
        {
          type: 'date',
          key: 'a',
          props: {
            label: '月区间',
            dateType: 'monthrange',
            required: true,
            validator: {
              text: '不能为空',
              reg: 'required'
            }
          }
        },
        {
          type: 'date',
          key: 's',
          span: 12,
          props: {
            label: '年区间',
            dateType: 'yearrange',
            required: true,
            validator: {
              text: '不能为空',
              reg: 'required'
            }
          }
        },
        {
          type: 'cascader',
          key: 'd',
          props: {
            label: '级联',
            required: true,
            validator: {
              text: '不能为空',
              reg: 'required'
            }
          }
        },
        {
          type: 'checkbox',
          key: 'f',
          span: 18,
          props: {
            label: 'checkbox'
          }
        },
        {
          type: 'radio',
          key: 'g',
          span: 12,
          props: {
            label: 'radio'

          }
        }
      ],
      sexList: [],
      tableData: [
        {
          id: 10001,
          name: 'Test1',
          role: 'Develop',
          sex: 'Man',
          age: 28,
          address: 'vxe-table 从入门到放弃'
        },
        {
          id: 10002,
          name: 'Test2',
          role: 'Test',
          sex: 'Women',
          age: 22,
          address: 'Guangzhou'
        },
        {
          id: 10003,
          name: 'Test3',
          role: 'PM',
          sex: 'Man',
          age: 32,
          address: 'Shanghai'
        },
        {
          id: 10004,
          name: 'Test4',
          role: 'Designer',
          sex: 'Women ',
          age: 23,
          address: 'vxe-table 从入门到放弃'
        },
        {
          id: 10005,
          name: 'Test5',
          role: 'Develop',
          sex: 'Women ',
          age: 30,
          address: 'Shanghai'
        }
      ],
      page: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 20
      }

    }
  },
  created() {},
  methods: {
    async add(row) {
      return
    },
    link() {
      this.$refs.filter.allVerification()
      this.$http.get(this.$url.getTest).then(({ data }) => {
        this.$refs.filter.setAllValue(data)
      })
    },
    setValue() {
      this.$refs.filter.setAllValue()
    },
    editRowEvent(row) {
      this.$refs.xTable.$table.setActiveRow(row)
      // console.log(this.$refs.xTable.setActiveRow())
    },
    edit() {},
    car() {},
    excelImport() {},
    excelDownLoad() {},
    removeCard() {},
    downLoadCard() {},
    submitCard() {}
  }
}

</script>

<style lang="scss" scoped>
  .content {
    padding: 10px;
    .btn {
      text-align: center;
    }
    .table {
      margin-top: 20px;
      padding: 0 10px;
      h3 {
        padding-bottom: 10px;
      }
    }

    .name {
      position: absolute;
      top: 0;
      right: -35px;
      cursor: pointer;
      color: #ccc;
    }
  }

  .an-bottom-container{
    position: relative;
    padding: 10px 10px 10px 10px;
    margin-top: 10px;
    background-color: #e9f1fb;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .custom span{
      color: #de0705;
      margin: 0 3px;
      font-size: 22px;
      font-weight: bold;
      font-family: Times New Roman,Georgia,serif;
    }
  }

</style>
